<template>
  <view class="Card class">
    <view class="h2 Header" v-if="showHeader()">
      <view class="Title">
        <text v-if="title">{{ title }}</text>
        <slot v-else name="Title" />
      </view>
      <uni-icons
        v-if="!disabledFold"
        type="arrowdown"
        @click="arrowClickHandler"
        :class="{ ArrowVisible: visibleBody, Arrow: true }"
      />
    </view>
    <view
      :class="{ Separate: true, SeparateVisible: visibleBody }"
      v-if="showHeader()"
    />
    <view v-if="visibleBody" class="Body">
      <slot />
    </view>
  </view>
</template>
<script lang="ts">
import Vue from '@/utils/Vue';

interface IData {
  visibleBody: boolean;
}

export default Vue.extend({
  data(): IData {
    return {
      visibleBody: true,
    };
  },
  components: {},
  props: {
    title: {
      type: String,
      required: false,
    },
    disabledFold: {
      type: Boolean,
      default: false,
    },
  },

  methods: {
    arrowClickHandler() {
      this.visibleBody = !this.visibleBody;
    },
    showHeader() {
      return this.title || !this.disabledFold;
    },
  },
  options: { virtualHost: true },
  externalClasses: ['class'],
});
</script>
<style lang="less" scoped>
.Card {
  background-color: #ffffff;
  box-shadow: 0px 0px 5px 0px rgba(184, 184, 184, 0.55);
  border-radius: 7px;
  border: solid 1px #ffffff;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  .Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    .Title {
      display: flex;
      align-items: center;
    }
  }

  .Separate {
    height: 1px;
    background: #ddd;
    opacity: 0;
    transition: all 1s;
    transform: scale(0, 1);
    &.SeparateVisible {
      transform: none;
      opacity: 1;
    }
  }

  .Body {
    padding: 15px 0;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: auto;
  }

  .Arrow {
    transition: all 0.3s;
    transform: rotate(-90deg);
    &.ArrowVisible {
      transform: none;
    }
  }
}
</style>
